<template>
    <div>
      <h1>toRefs</h1>
      <!-- reactive包裹对象变为响应式 -->
      <h1>{{ obj.name }}</h1>
      <h1>{{ obj.age }}</h1>
  
      <!-- 变换是因为通过toRefs加工过后变为ref对象 -->
      <h1>{{ name }}</h1>
      <h1>{{ age }}</h1>
      <input type="text" v-model="obj.name" /><br />
      <input type="text" v-model="obj.age" /><br />
      <input type="text" v-model="name" /><br />
      <input type="text" v-model="age" /><br />
      <input type="text" v-model="name1" /><br />
      <input type="text" v-model="age1" />
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, reactive, toRefs } from "vue";
  export default defineComponent({
    // toRefs  将响应式对象的值都变为ref对象
    /* 
    vue3当中的响应式对象  
    proxy对象  reactive
    ref对象   ref
    
    */
  
    setup() {
      const obj = reactive({
        name: "tom",
        age: 10,
      });
      console.log(obj);
      const objToRefs = toRefs(obj);
      console.log(objToRefs);
      // obj.name字符串
      const name1 = obj.name;
      const age1 = obj.age;
      return {
        ...objToRefs,
        obj,
        name1,
        age1,
      };
    },
  });
  </script>
  
  <style scoped>
  </style>